﻿@page "/treemap/customization"

@using Syncfusion.Blazor.TreeMap
@inject NavigationManager UriHelper
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the gold medal categories of US in 2016 summer Olympics. Each categories are denoted with label template. </p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to place custom templates in the treemap items. Also we have formatted the label text. Tooltip is enabled in this example.</p>
</ActionDescription>

<div class="control-section">
    <SfTreeMap WeightValuePath="Gold" RangeColorValuePath="Sales" DataSource="@DataSource" TValue="TreeMapData">
        <TreeMapTitleSettings Text="US Gold medal categories in Summer Olympics - 2016"/>
        <TreeMapLeafItemSettings LabelPath="Sport" Fill="#993399" LabelFormat="${Sport} - ${Gold}" TemplatePosition="LabelPosition.Center">
            <LabelTemplate>
                @{
                    var Employee = (context as TreeMapData);
                    <div>
                        <img src="images/treemap/@Employee.GameImage" style="height:@Employee.ItemHeight;width:@Employee.ItemWidth;"/>
                    </div>
                }
            </LabelTemplate>
            <ChildContent>
                <TreeMapLeafBorder Color="#000000" Width="0.5"/>
            </ChildContent>
        </TreeMapLeafItemSettings>
        <TreeMapTooltipSettings Visible="true" Format="${Sport} : ${Gold}"/>
    </SfTreeMap>
    <div class="urllink">
        Source:
        <a href=" https://en.wikipedia.org/wiki/United_States_at_the_2016_Summer_Olympics" target="_blank"> en.wikipedia.org</a>
    </div>
</div>
@code {
    public class TreeMapData {
        public string Sport { get; set; }
        public int Gold { get; set; }
        public string GameImage { get; set; }
        public string ItemHeight { get; set; }
        public string ItemWidth { get; set; }
    }
    public static List<TreeMapData> DataSource = new List<TreeMapData> {
        new TreeMapData { Sport="Swimming", Gold=16, GameImage="Swimming.svg", ItemHeight="180px", ItemWidth="180px" },
        new TreeMapData { Sport="Athletics", Gold=13, GameImage="Athletics.svg", ItemHeight="70px", ItemWidth="70px" },
        new TreeMapData { Sport="Gymnastics", Gold=4, GameImage="Gymnastics.svg", ItemHeight="80px", ItemWidth="80px" },
        new TreeMapData { Sport="Cycling", Gold=2, GameImage="Cycling.svg", ItemHeight="50px", ItemWidth="50px" },
        new TreeMapData { Sport="Wrestling", Gold=2, GameImage="Wrestling.svg", ItemHeight="60px", ItemWidth="50px" },
        new TreeMapData { Sport="Basketball", Gold=2, GameImage="Basket-ball.svg", ItemHeight="50px", ItemWidth="50px" },
        new TreeMapData { Sport="Boxing", Gold=1, GameImage="Boxing.svg", ItemHeight="40px", ItemWidth="30px" },
        new TreeMapData { Sport="Tennis", Gold=1, GameImage="Tennis.svg", ItemHeight="40px", ItemWidth="40px" },
        new TreeMapData { Sport="Judo", Gold=1, GameImage="Judo.svg", ItemHeight="40px", ItemWidth="40px" },
        new TreeMapData { Sport="Rowing", Gold=1, GameImage="Rowing.svg", ItemHeight="40px", ItemWidth="40px" },
        new TreeMapData { Sport="Shooting", Gold=1, GameImage="Shooting.svg", ItemHeight="40px", ItemWidth="40px" },
        new TreeMapData { Sport="Triathlon", Gold=1, GameImage="Triathlon.svg", ItemHeight="40px", ItemWidth="40px" },
        new TreeMapData { Sport="Water polo", Gold=1, GameImage="Water-polo.svg", ItemHeight="40px", ItemWidth="40px" }
    };
}